<template>
  <view class="page-container">
  <view class="top-padding"></view>
    <!-- 搜索区域 -->
    <view class="search-bar">
      <view class="search-container">
        <uni-search-bar v-model="searchName" placeholder="输入店铺名称" radius="100" clearButton="auto"
          @confirm="handleSearch" />
        <view class="action-buttons">
          <view class="search-btn" @click="handleSearch">搜索</view>
          <uni-icons class="add-btn" type="plus" size="30" @click="handleCreateStore" />
        </view>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="list-container">
      <view v-if="stores.length">
        <view v-for="(store, index) in stores" :key="index" class="store-card">
          <view class="hearder-box">
            <view class="store-img">
              <image class="store-image" :src="store.image_url || '/static/card4.png'" mode="aspectFill" />
            </view>
            <view class="store-title">
              <text class="store-name">{{ store.name }}</text>
              <text class="status-text" :class="!store.is_deleted ? 'open' : 'closed'">
                {{ store.is_deleted ? '(已停业)' : '营业中' }}
              </text>
            </view>
            <view class="store-time-status" v-if="store.open_time && store.close_time">
              <text class="store-time">🕒 {{ Util.formatTime(store.open_time) }}-{{ Util.formatTime(store.close_time)
              }}</text>
            </view>
          </view>
          <view class="store-actions">
            <view class="action-links">
              <text class="action-link" @click.stop="goToAddConsumption(store.store_id)">新增收支</text>
              <text class="action-link" @click.stop="toStatistics(store)">业绩提成</text>
              <text class="action-link" @click.stop="handleCardManagement(store)">卡包管理</text>
              <text class="action-link" @click.stop="handleStaffManagement(store)">员工管理</text>
            </view>
            <view class="primary-action" @click.stop="handleViewStore(store.store_id)">订单管理</view>
          </view>
        </view>
      </view>
      <view v-else class="store-card flex-center">
        <text>暂无店铺信息</text>
      </view>
    </view>
    <view class="bottom-padding"></view>
    <tab-bar />
  </view>
</template>

<script>
import TabBar from '@/components/tab-bar/tab-bar.vue';
import store from '@/utils/store.js';
import Util from '@/utils/util.js';
export default {
  data() {
    return {
      Util,
      searchName: '',
      stores: []
    };
  },
  created() {
    this.fetchStores();
  },
  onShow() {
    this.fetchStores(); // 页面显示时重新查询店铺列表
    uni.$on('refreshStoreList', this.fetchStores);
  },
  onHide() {
    uni.$off('refreshStoreList', this.fetchStores);
  },
  methods: {
    handleStaffManagement(store) {
      uni.navigateTo({
        url: `/pages/user/staff?store_id=${store.store_id}`
      });
    },
    goToAddConsumption(storeId) {
      uni.navigateTo({
        url: `/pages/store/add_consumption?store_id=${storeId}`
      });
    },
    toStatistics(store) {
      uni.navigateTo({
        url: `/pages/store/statistics?store_id=${store.store_id}&store_name=${encodeURIComponent(store.name)}`
      });
    },
    async fetchStores() {
      try {
        const params = {};
        if (this.searchName) {
          params.name = this.searchName;
        }
        const res = await store.getStores(params);

        let list = res.data.map(item => ({
          ...item,
          status: !item.is_deleted
        }));
        this.stores = list
      } catch (error) {
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    },
    handleSearch() {
      this.fetchStores();
    },
    handleCreateStore() {
      uni.navigateTo({
        url: '/pages/store/edit'
      });
    },
    handleViewStore(id) {
      uni.navigateTo({
        url: `/pages/store/detail?id=${id}`
      });
    },
    handleCardManagement(store) {
      uni.navigateTo({
        url: `/pages/card_package/index?store_id=${store.store_id}&manager_id=${store.manager_id}`
      });
    }
  }
}
</script>

<style lang="scss">
@import '@/uni.scss';
</style>